<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试历史</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 长按选择样式 */
        .history-item.selected {
            border: 2px solid #3b82f6;
            background-color: rgba(59, 130, 246, 0.2);
        }
        
        /* 自定义确认弹窗样式 - 修改背景色与整体风格一致 */
        .custom-alert {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgb(31 41 55 / var(--tw-bg-opacity, 1)); /* 修改为深色背景 */
            border-radius: 12px;
            padding: 20px;
            width: 80%;
            max-width: 300px;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease-out;
            border: 1px solid #333; /* 添加边框 */
        }
        
        .alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            animation: fadeIn 0.2s ease-out;
        }
        
        .selection-mode-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #1a1a1a; /* 修改为深色背景 */
            padding: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            animation: slideUp 0.3s ease-out;
            border-top: 1px solid #333; /* 添加顶部边框 */
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
    <!-- 顶部导航栏  去掉 onclick="goToHome()"-->
    <div class="bg-gray-800 px-4 py-3 pt-12 flex items-center">
        <button class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-4 hover:bg-gray-600 transition-all">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="text-xl font-bold flex-1">测试历史</h1>
    </div>

    <!-- 统计信息 -->
    <div class="p-4">
        <div class="grid grid-cols-3 gap-3 mb-4">
            <div class="bg-gray-800 rounded-lg p-3 text-center">
                <div class="text-2xl font-bold text-blue-400">156</div>
                <div class="text-xs text-gray-400">总测试次数</div>
            </div>
            <div class="bg-gray-800 rounded-lg p-3 text-center">
                <div class="text-2xl font-bold text-green-400">142</div>
                <div class="text-xs text-gray-400">通过次数</div>
            </div>
            <div class="bg-gray-800 rounded-lg p-3 text-center">
                <div class="text-2xl font-bold text-red-400">14</div>
                <div class="text-xs text-gray-400">失败次数</div>
            </div>
        </div>
    </div>

    <!-- 历史记录列表 - 修改为按日期分组 -->
    <div class="px-4 pb-20" id="historyContainer">
        <!-- 2025-7-17 -->
        <div class="mb-4">
            <button class="w-full flex items-center justify-between bg-gray-800 rounded-lg p-3 mb-2 hover:bg-gray-700 transition-all" onclick="toggleDay('day20250717')">
                <div class="flex items-center">
                    <i class="fas fa-calendar-day text-blue-400 mr-3"></i>
                    <span class="font-semibold">2025-7-17</span>
                    <span class="ml-2 text-sm text-gray-400">(3次测试)</span>
                </div>
                <i class="fas fa-chevron-down transition-transform" id="day20250717-arrow"></i>
            </button>
            
            <div class="space-y-2 pl-4" id="day20250717-content">
                <!-- 测试记录1 -->
                <div class="bg-gray-800 rounded-lg p-3 card-hover history-item" data-id="1">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
                            1
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium">14:25:30</span>
                                <span class="px-2 py-1 bg-green-600 text-xs rounded-full">PASS</span>
                            </div>
                            <div class="text-xs text-gray-400">持续时间: 25秒</div>
                        </div>
                        <div class="w-12 h-8 bg-gray-700 rounded ml-3 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&h=60&fit=crop" 
                                 class="w-full h-full object-cover cursor-pointer hover:scale-110 transition-transform" 
                                 onclick="playVideo(1)">
                        </div>
                    </div>
                </div>

                <!-- 测试记录2 -->
                <div class="bg-gray-800 rounded-lg p-3 card-hover history-item" data-id="2">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
                            2
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium">13:45:12</span>
                                <span class="px-2 py-1 bg-red-600 text-xs rounded-full">FAIL</span>
                            </div>
                            <div class="text-xs text-gray-400">持续时间: 25秒 • 黑屏检测</div>
                        </div>
                        <div class="w-12 h-8 bg-gray-700 rounded ml-3 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&h=60&fit=crop" 
                                 class="w-full h-full object-cover cursor-pointer hover:scale-110 transition-transform" 
                                 onclick="playVideo(2)">
                        </div>
                    </div>
                </div>

                <!-- 测试记录3 -->
                <div class="bg-gray-800 rounded-lg p-3 card-hover history-item" data-id="3">
                    <div class="flex items-center">
                        <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-sm font-bold mr-3">
                            3
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-medium">10:30:45</span>
                                <span class="px-2 py-1 bg-green-600 text-xs rounded-full">PASS</span>
                            </div>
                            <div class="text-xs text-gray-400">持续时间: 25秒</div>
                        </div>
                        <div class="w-12 h-8 bg-gray-700 rounded ml-3 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=100&h=60&fit=crop" 
                                 class="w-full h-full object-cover cursor-pointer hover:scale-110 transition-transform" 
                                 onclick="playVideo(3)">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2025-7-16 -->
        <div class="mb-4">
            <button class="w-full flex items-center justify-between bg-gray-800 rounded-lg p-3 mb-2 hover:bg-gray-700 transition-all" onclick="toggleDay('day20250716')">
                <div class="flex items-center">
                    <i class="fas fa-calendar-day text-purple-400 mr-3"></i>
                    <span class="font-semibold">2025-7-16</span>
                    <span class="ml-2 text-sm text-gray-400">(8次测试)</span>
                </div>
                <i class="fas fa-chevron-right transition-transform" id="day20250716-arrow"></i>
            </button>
            
            <div class="space-y-2 pl-4 hidden" id="day20250716-content">
                <div class="text-center text-gray-500 py-4">
                    <i class="fas fa-chevron-down text-2xl mb-2"></i>
                    <div>点击展开查看2025-7-16的测试记录</div>
                </div>
            </div>
        </div>

        <!-- 2025-7-15 -->
        <div class="mb-4">
            <button class="w-full flex items-center justify-between bg-gray-800 rounded-lg p-3 mb-2 hover:bg-gray-700 transition-all" onclick="toggleDay('day20250715')">
                <div class="flex items-center">
                    <i class="fas fa-calendar-day text-green-400 mr-3"></i>
                    <span class="font-semibold">2025-7-15</span>
                    <span class="ml-2 text-sm text-gray-400">(5次测试)</span>
                </div>
                <i class="fas fa-chevron-right transition-transform" id="day20250715-arrow"></i>
            </button>
            
            <div class="space-y-2 pl-4 hidden" id="day20250715-content">
                <div class="text-center text-gray-500 py-4">
                    <i class="fas fa-chevron-down text-2xl mb-2"></i>
                    <div>点击展开查看2025-7-15的测试记录</div>
                </div>
            </div>
        </div>

        <!-- 2025-7-10 -->
        <div class="mb-4">
            <button class="w-full flex items-center justify-between bg-gray-800 rounded-lg p-3 mb-2 hover:bg-gray-700 transition-all" onclick="toggleDay('day20250710')">
                <div class="flex items-center">
                    <i class="fas fa-calendar-day text-orange-400 mr-3"></i>
                    <span class="font-semibold">2025-7-10</span>
                    <span class="ml-2 text-sm text-gray-400">(12次测试)</span>
                </div>
                <i class="fas fa-chevron-right transition-transform" id="day20250710-arrow"></i>
            </button>
            
            <div class="space-y-2 pl-4 hidden" id="day20250710-content">
                <div class="text-center text-gray-500 py-4">
                    <i class="fas fa-chevron-down text-2xl mb-2"></i>
                    <div>点击展开查看2025-7-10的测试记录</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 悬浮清空按钮 -->
    <button class="fixed bottom-6 right-6 w-14 h-14 bg-red-600 hover:bg-red-700 rounded-full flex items-center justify-center shadow-lg transition-all" onclick="showCustomAlert('确定要清空所有测试历史记录吗？此操作不可恢复。', clearAllHistory)">
        <i class="fas fa-trash text-xl"></i>
    </button>

    <!-- 视频播放模态框 - 修改为支持两种状态 -->
    <div class="fixed inset-0 bg-black bg-opacity-75 hidden items-center justify-center z-50" id="videoModal">
        <div class="bg-gray-800 rounded-lg p-4 max-w-sm w-full mx-4">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">测试视频回放</h3>
                <button onclick="closeVideo()" class="text-gray-400 hover:text-white">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <!-- 正常视频显示区域 -->
            <div id="videoContainer" class="bg-black rounded-lg aspect-video mb-4 flex items-center justify-center">
                <i class="fas fa-play text-4xl text-gray-400"></i>
            </div>
            <!-- 视频不存在时的提示 -->
            <div id="videoNotFound" class="bg-black rounded-lg aspect-video mb-4 hidden flex-col items-center justify-center">
                <i class="fas fa-exclamation-circle text-red-500 text-4xl mb-2"></i>
                <div class="text-center text-gray-400">当前视频不存在</div>
            </div>
            <div class="text-sm text-gray-400 text-center">
                测试记录 #<span id="videoId">1</span> - <span id="videoStatus">点击播放查看详情</span>
            </div>
        </div>
    </div>
    
    <!-- 自定义确认弹窗 -->
    <div id="customAlert" class="hidden">
        <div class="alert-overlay"></div>
        <div class="custom-alert">
            <div class="text-center mb-4">
                <i class="fas fa-exclamation-triangle text-yellow-500 text-2xl mb-2"></i>
                <div class="text-lg font-semibold mb-1">确认操作</div>
                <div class="text-sm text-gray-400" id="alertMessage"></div>
            </div>
            <div class="flex space-x-2">
                <button id="alertCancel" class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all">
                    取消
                </button>
                <button id="alertConfirm" class="flex-1 py-2 bg-red-600 hover:bg-red-500 rounded-lg transition-all">
                    确认
                </button>
            </div>
        </div>
    </div>
    
    <!-- 选择模式底部栏 -->
    <div id="selectionModeBar" class="selection-mode-bar hidden">
        <div>
            <span id="selectedCount" class="font-semibold">0</span> 个已选择
        </div>
        <div class="flex space-x-3">
            <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all" onclick="exitSelectionMode()">
                取消
            </button>
            <button class="px-4 py-2 bg-red-600 hover:bg-red-500 rounded-lg transition-all" onclick="deleteSelected()">
                删除
            </button>
        </div>
    </div>

    <script>
        // 全局变量
        let isSelectionMode = false;
        let selectedItems = new Set();
        let longPressTimer;
        const longPressDuration = 500; // 长按时间（毫秒）
        let isLongPressing = false; // 新增：标记是否正在长按中
        
        // 初始化长按事件
        function initLongPress() {
            const historyItems = document.querySelectorAll('.history-item');
            
            historyItems.forEach(item => {
                // 触摸事件（移动设备）
                item.addEventListener('touchstart', handleTouchStart);
                item.addEventListener('touchend', handleTouchEnd);
                item.addEventListener('touchmove', handleTouchMove);
                
                // 鼠标事件（桌面设备）
                item.addEventListener('mousedown', handleMouseDown);
                item.addEventListener('mouseup', handleMouseUp);
                item.addEventListener('mouseleave', handleMouseUp);
                
                // 点击事件（选择模式下）
                item.addEventListener('click', handleItemClick);
            });
        }
        
        // 触摸事件处理
        function handleTouchStart(e) {
            const item = this;
            isLongPressing = false; // 重置长按状态
            
            longPressTimer = setTimeout(() => {
                isLongPressing = true; // 标记为长按状态
                enterSelectionMode(item);
            }, longPressDuration);
        }
        
        function handleTouchEnd(e) {
            clearTimeout(longPressTimer);
            // 如果是长按状态，阻止默认点击行为
            if (isLongPressing) {
                e.preventDefault();
                e.stopPropagation();
            }
        }
        
        function handleTouchMove(e) {
            clearTimeout(longPressTimer);
            isLongPressing = false;
        }
        
        // 鼠标事件处理
        function handleMouseDown(e) {
            const item = this;
            isLongPressing = false; // 重置长按状态
            
            longPressTimer = setTimeout(() => {
                isLongPressing = true; // 标记为长按状态
                enterSelectionMode(item);
            }, longPressDuration);
        }
        
        function handleMouseUp(e) {
            clearTimeout(longPressTimer);
            // 如果是长按状态，阻止默认点击行为
            if (isLongPressing) {
                e.preventDefault();
                e.stopPropagation();
            }
        }
        
        // 进入选择模式
        function enterSelectionMode(item) {
            if (!isSelectionMode) {
                isSelectionMode = true;
                document.getElementById('selectionModeBar').classList.remove('hidden');
                
                // 禁用视频点击
                const videoThumbnails = document.querySelectorAll('.history-item img');
                videoThumbnails.forEach(img => {
                    img.setAttribute('data-original-onclick', img.getAttribute('onclick') || '');
                    img.setAttribute('onclick', '');
                });
            }
            
            // 选择第一个项目
            toggleItemSelection(item);
            
            // 防止事件冒泡导致选择后立即取消
            // 使用更长的延时确保所有事件都已处理完毕
            setTimeout(() => {
                isLongPressing = false;
            }, 300);
        }
        
        // 退出选择模式
        function exitSelectionMode() {
            isSelectionMode = false;
            selectedItems.clear();
            
            // 隐藏底部栏
            document.getElementById('selectionModeBar').classList.add('hidden');
            
            // 移除所有选择样式
            const historyItems = document.querySelectorAll('.history-item');
            historyItems.forEach(item => {
                item.classList.remove('selected');
            });
            
            // 恢复视频点击功能
            const videoThumbnails = document.querySelectorAll('.history-item img');
            videoThumbnails.forEach(img => {
                const originalOnclick = img.getAttribute('data-original-onclick');
                if (originalOnclick) {
                    img.setAttribute('onclick', originalOnclick);
                    img.removeAttribute('data-original-onclick');
                }
            });
        }
        
        // 处理项目点击
        function handleItemClick(e) {
            // 如果是长按状态或选择模式，阻止默认点击行为
            if (isLongPressing) {
                e.preventDefault();
                e.stopPropagation();
                return;
            }
            
            if (isSelectionMode) {
                e.preventDefault();
                e.stopPropagation();
                toggleItemSelection(this);
            }
        }
        
        // 切换项目选择状态
        function toggleItemSelection(item) {
            const itemId = item.getAttribute('data-id');
            
            if (selectedItems.has(itemId)) {
                selectedItems.delete(itemId);
                item.classList.remove('selected');
            } else {
                selectedItems.add(itemId);
                item.classList.add('selected');
            }
            
            // 更新选择计数
            document.getElementById('selectedCount').textContent = selectedItems.size;
        }
        
        // 删除选中的项目
        function deleteSelected() {
            if (selectedItems.size === 0) return;
            
            showCustomAlert(`确定要删除选中的 ${selectedItems.size} 条记录吗？`, () => {
                // 删除选中的项目
                selectedItems.forEach(itemId => {
                    const item = document.querySelector(`.history-item[data-id="${itemId}"]`);
                    if (item) {
                        item.style.transform = 'translateX(100%)';
                        item.style.opacity = '0';
                        setTimeout(() => {
                            item.remove();
                        }, 300);
                    }
                });
                
                // 显示删除成功提示
                setTimeout(() => {
                    showToast('删除成功');
                    exitSelectionMode();
                }, 500);
            });
        }
        
        // 显示自定义确认弹窗
        function showCustomAlert(message, confirmCallback) {
            const alertElement = document.getElementById('customAlert');
            const messageElement = document.getElementById('alertMessage');
            const confirmButton = document.getElementById('alertConfirm');
            const cancelButton = document.getElementById('alertCancel');
            
            messageElement.textContent = message;
            alertElement.classList.remove('hidden');
            
            // 设置按钮事件
            confirmButton.onclick = () => {
                alertElement.classList.add('hidden');
                if (confirmCallback) confirmCallback();
            };
            
            cancelButton.onclick = () => {
                alertElement.classList.add('hidden');
            };
            
            // 点击背景关闭
            document.querySelector('.alert-overlay').onclick = () => {
                alertElement.classList.add('hidden');
            };
        }
        
        // 显示Toast提示
        function showToast(message, duration = 2000) {
            // 创建Toast元素
            const toast = document.createElement('div');
            toast.className = 'fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50 fade-in';
            toast.textContent = message;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 定时移除
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, duration);
        }
        
        function toggleDay(dayId) {
            const content = document.getElementById(dayId + '-content');
            const arrow = document.getElementById(dayId + '-arrow');
            
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                arrow.classList.remove('fa-chevron-right');
                arrow.classList.add('fa-chevron-down');
                arrow.style.transform = 'rotate(0deg)';
            } else {
                content.classList.add('hidden');
                arrow.classList.remove('fa-chevron-down');
                arrow.classList.add('fa-chevron-right');
                arrow.style.transform = 'rotate(-90deg)';
            }
        }

        function playVideo(id) {
            if (isSelectionMode) return; // 选择模式下禁用视频播放
            
            // 获取视频模态框元素
            const videoModal = document.getElementById('videoModal');
            const videoContainer = document.getElementById('videoContainer');
            const videoNotFound = document.getElementById('videoNotFound');
            const videoStatus = document.getElementById('videoStatus');
            const videoId = document.getElementById('videoId');
            
            // 设置视频ID
            videoId.textContent = id;
            
            // 检查视频是否存在（这里使用模拟数据，实际项目中应从后端获取）
            const videoExists = checkVideoExists(id);
            
            if (videoExists) {
                // 视频存在，显示正常播放界面
                videoContainer.classList.remove('hidden');
                videoContainer.classList.add('flex');
                videoNotFound.classList.add('hidden');
                videoNotFound.classList.remove('flex');
                videoStatus.textContent = '点击播放查看详情';
            } else {
                // 视频不存在，显示提示信息
                videoContainer.classList.add('hidden');
                videoContainer.classList.remove('flex');
                videoNotFound.classList.remove('hidden');
                videoNotFound.classList.add('flex-col');
                videoStatus.textContent = '视频源已不存在';
            }
            
            // 显示模态框
            videoModal.classList.remove('hidden');
            videoModal.classList.add('flex');
        }

        // 检查视频是否存在（模拟函数，实际项目中应从后端获取）
        function checkVideoExists(id) {
            // 这里仅作为示例，模拟一些视频不存在的情况
            // 在实际项目中，应该通过API调用或其他方式检查视频文件是否存在
            
            // 假设ID为2的视频不存在（仅作为示例）
            return id != 2;
        }

        function closeVideo() {
            document.getElementById('videoModal').classList.add('hidden');
            document.getElementById('videoModal').classList.remove('flex');
        }

        function clearAllHistory() {
            // 模拟清空动画
            const records = document.querySelectorAll('.card-hover');
            records.forEach((record, index) => {
                setTimeout(() => {
                    record.style.transform = 'translateX(100%)';
                    record.style.opacity = '0';
                }, index * 100);
            });
            
            setTimeout(() => {
                showToast('历史记录已清空');
                // 重新加载页面或清空DOM
                const containers = document.querySelectorAll('[id$="-content"]');
                containers.forEach(container => {
                    container.innerHTML = '<div class="text-center text-gray-500 py-4">暂无记录</div>';
                });
            }, records.length * 100 + 500);
        }

        // 点击模态框外部关闭
        document.getElementById('videoModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeVideo();
            }
        });
        
        // 返回主页函数
        function goToHome() {
            if (window.parent && window.parent.showPage) {
                window.parent.showPage('home');
            } else {
                window.location.href = 'home.html';
            }
        }
        
        // 生成按日期分组的历史记录（实际项目中应从后端获取）
        function generateHistoryByDate() {
            // 这里只是示例，实际项目中应从后端获取数据
            // 此函数在实际项目中可以用来动态生成历史记录
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initLongPress();
            // generateHistoryByDate(); // 实际项目中可以调用此函数生成历史记录
        });
    </script>
</body>
</html>